<template>
  <div class="flex contentBox">
    <div id="chart" ref="chart" class="chart"></div>
    <div id="chart2" ref="chart2" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
var erd = elementResizeDetectorMaker();
export default {
  data() {
    return {
      charts: null,
      charts2: null,
    };
  },
  mounted() {
    if (this.charts == null) {
      this.charts = echarts.init(document.getElementById("chart"), null, {
        renderer: "canvas",
      });
    }
    if (this.charts2 == null) {
      this.charts2 = echarts.init(document.getElementById("chart2"), null, {
        renderer: "canvas",
      });
    }
    setTimeout(() => {
      this.initData7();
      this.initData8();
    }, 60);
    erd.listenTo(document.getElementById("chart"), this.handleWindowResize);
    erd.listenTo(document.getElementById("chart2"), this.handleWindowResize);
  },
  beforeDestroy() {
    erd.uninstall(this.$refs.chart);
    erd.uninstall(this.$refs.chart2);
  },
  methods: {
    handleWindowResize() {
      if (!this.charts || !this.chart2) return;
      this.$nextTick(() => {
        this.charts.resize();
        this.charts2.resize();
      });
    },
    initData() {
      var XName = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      var data1 = [
        [123, 154, 234, 321, 120, 390, 634],
        [63, 194, 234, 321, 278, 110, 534],
        [53, 254, 234, 321, 118, 240, 434],
        [23, 354, 334, 221, 178, 190, 234],
      ];
      var Line = [
        "云篆山水路线",
        "昕博朗学校路线",
        "新华小学路线",
        "云锦五路路线",
      ];
      var img = [
        "image://",
        "image://",
        "image://",
        "image://",
      ];
      var color = ["#00f8ff", "#00f15a", "#0696f9", "#dcf776"];

      //数据处理
      var datas = [];
      Line.map((item, index) => {
        datas.push({
          symbolSize: 150,
          symbol: img[index],
          name: item,
          type: "line",
          yAxisIndex: 1,
          data: data1[index],
          itemStyle: {
            normal: {
              borderWidth: 5,
              color: color[index],
            },
          },
        });
      });

      var option = {
        backgroundColor: "#0e2147",
        grid: {
          left: "5%",
          top: "5%",
          bottom: "5%",
          right: "5%",
        },
        legend: {
          type: "scroll",
          data: Line,
          itemWidth: 18,
          itemHeight: 12,
          textStyle: {
            color: "#00ffff",
            fontSize: 14,
          },
        },
        yAxis: [
          {
            type: "value",
            position: "right",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
          },
          {
            type: "value",
            position: "left",
            nameTextStyle: {
              color: "#00FFFF",
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(135,140,147,0.8)",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
              color: "#fff",
              fontSize: 14,
            },
          },
        ],
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#6A989E",
              },
            },
            axisLabel: {
              inside: false,
              textStyle: {
                color: "#fff", // x轴颜色
                fontWeight: "normal",
                fontSize: "14",
                lineHeight: 22,
              },
            },
            data: XName,
          },
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            //-----
            data: ["1月", "2月", "3月", "4月", "5月", "6月"],
          },
        ],
        series: datas,
      };
      this.charts.clear();
      this.charts.setOption(option);
    },
    initData2() {
      this.charts.setOption({
        backgroundColor: "#0e2147",
        color: ["#00D8FF"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          y: "bottom",
          itemGap: 30,
          itemWidth: 30,
          itemHeight: 10,
          textStyle: {
            fontSize: 13, //字体大小
            color: "rgb(142, 199, 220)", //字体颜色
          },
        },
        calculable: true,

        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "06:00",
              "09:00",
              "12:00",
              "15:00",
              "18:00",
              "21:00",
              "24:00",
            ],
            axisLabel: {
              show: true,
              textStyle: {
                color: ["rgb(142, 199, 220)"],
              },
            },
            axisLine: {
              lineStyle: {
                color: "#023c7a",
                width: 1,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} °C",
              show: true,
              textStyle: {
                color: ["rgb(142, 199, 220)"],
              },
            },
            splitLine: {
              lineStyle: {
                color: "#023c7a",
                width: 1,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#023c7a",
                width: 1,
              },
            },
          },
        ],
        series: [
          {
            symbolSize: 0, //折线点的大小

            type: "line",
            data: [6000, 4000, 8000, 10000, 4000, 2000, 4000, 2000, 6000],
            areaStyle: {
              normal: {
                //前四个参数代表位置 左下右上，暗青色到亮青色，
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(12,180,250, 1)" }, //从上往下的渐变
                  { offset: 1, color: "rgba(63, 208, 249, 0)" },
                ]),
              },
            },

            lineStyle: {
              shadowColor: "#5cfbff", //透明的颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1, //透明度
              shadowBlur: 8, //阴影大小
              type: "solid", //实线
              width: 2,
            },
          },
        ],
      });
    },
    initData3() {
      //  renderer: "svg",渲染
      //数据
      var XName = [
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六",
        "周日",
        "粥吧",
      ];
      var data1 = [67, 97, 51, 338, 32, 11, 1, 999];
      var img = [
        "image://",
        "image://",
        "image://",
        "image://",
      ];
      var data = [
        {
          coords: [
            ["周一", 67],
            ["周二", 97],
            ["周三", 51],
            ["周四", 338],
            ["周五", 32],
            ["周六", 11],
            ["周日", 1],
            ["粥吧", 999],
          ],
        },
      ];

      var option = {
        backgroundColor: "#0e2147",
        grid: {
          left: "5%",
          top: "5%",
          bottom: "5%",
          right: "5%",
        },
        legend: {
          type: "scroll",
          data: "来电量",
          itemWidth: 18,
          itemHeight: 12,
          textStyle: {
            color: "#00ffff",
            fontSize: 14,
          },
        },
        yAxis: [
          {
            type: "value",
            position: "left",
            nameTextStyle: {
              color: "#00FFFF",
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(135,140,147,0.8)",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}",
              color: "#fff",
              fontSize: 14,
            },
          },
        ],
        xAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#0696f9",
              },
            },
            axisLabel: {
              inside: false,
              textStyle: {
                color: "#fff", // x轴颜色
                fontWeight: "normal",
                fontSize: "14",
                lineHeight: 22,
              },
            },
            data: XName,
          },
        ],
        series: [
          {
            symbolSize: 150,
            symbol: img[2],
            name: "小灯光",
            type: "line",
            data: data1,
            itemStyle: {
              normal: {
                borderWidth: 5,
                color: "#0696f9",
              },
            },
          },
          {
            name: "滑行的光点",
            type: "lines",
            coordinateSystem: "cartesian2d",
            symbolSize: 30,
            polyline: true,
            effect: {
              show: true,
              trailLength: 0,
              period: 10, //光点滑动速度
              symbolSize: 150,
              symbol: img[0],
              color: "transparent",
            },
            lineStyle: {
              normal: {
                width: 1,
                opacity: 0.6,
                curveness: 0.2,
              },
            },
            data: data,
          },
        ],
      };
      this.charts.setOption(option);
    },
    // 实心圆点背景透明
    initData4() {
      var data = {
        city: ["0", "4", "8", "12", "16", "20"],
        num: ["40", "60", "22", "85", "50", "40"],
      };
      var option = {
        backgroundColor: "#0e1c47",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255,255,255,0)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255,255,255,1)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        },
        grid: {
          top: "18%",
          left: "15%",
          right: "5%",
          bottom: "25%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: 'color:"#092b5d"',
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#24c4ff",
                margin: 15,
              },
              formatter: function (data) {
                return data + "时";
              },
            },
            axisTick: {
              show: false,
            },
            data: data.city,
          },
        ],
        yAxis: [
          {
            min: 0,
            max: 100,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#092b5d",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#092b5d",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#24c4ff",
              },
              formatter: function (value) {
                if (value === 0) {
                  return value;
                }
                return value + "%";
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "注册总量",
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 8,
            lineStyle: {
              normal: {
                color: "#7c80f4", // 线条颜色
              },
              borderColor: "rgba(0,0,0,.4)",
            },
            itemStyle: {
              color: "rgba(14,30,73,1)",
              borderColor: "#646ace",
              borderWidth: 2,
            },
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: [" {a|{c}%}"].join(","),
                rich: {
                  a: {
                    color: "#fff",
                    align: "center",
                  },
                },
              },
            },
            tooltip: {
              show: true,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(124, 128, 244,.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(124, 128, 244, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: data.num,
          },
        ],
      };
      this.charts.setOption(option);
    },
    // 折线图流动不分段
    initData5() {
      // 统计百分比
      var data1 = [14, 15, 65, 24, 75, 23, 24, 43, 27, 72, 12, 53];
      var data2 = [45, 65, 24, 74, 75, 23, 42, 54, 13, 32, 52, 13];
      var json = {
        chart0: {
          xcategory: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          low: data1,
          lowLine: [],
        },
      };
      var json2 = {
        chart0: {
          xcategory: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          low: data2,
          lowLine: [],
        },
      };
      var datacoords = [
        {
          coords: [],
        },
      ];
      var datacoords2 = [
        {
          coords: [],
        },
      ];
      for (let i = 0; i < json.chart0.xcategory.length; i++) {
        datacoords[0].coords.push([json.chart0.xcategory[i], data1[i]]);
      }
      for (let i = 0; i < json.chart0.xcategory.length; i++) {
        datacoords2[0].coords.push([json2.chart0.xcategory[i], data2[i]]);
      }

      var option = {
        backgroundColor: "#03060F",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#15ecf4",
            },
          },
          backgroundColor: "rgba(0,0,0,.8)",
          extraCssText: "box-shadow: 4px 4px 10px rgba(21, 250, 255,.6);",
          formatter: function (params) {
            var result = params[0].name + "<br>";
            params.forEach(function (item) {
              result +=
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                item.color +
                '"></span>';
              // 判断设置增长还是降低
              if (parseFloat(item.data) >= 50) {
                result +=
                  item.seriesName +
                  ": " +
                  '<span class="growth">增长' +
                  item.data +
                  "%</span><br>";
              } else if (parseFloat(item.data) < 50) {
                result +=
                  item.seriesName +
                  ": " +
                  '<span class="reduce">降低' +
                  item.data +
                  "%</span><br>";
              }
            });
            return result;
          },
        },
        legend: {
          data: ["同比", "环比"],
          textStyle: {
            fontSize: 12,
            color: "rgb(0,253,255,0.6)",
          },
          top: "5%",
          right: "5%",
        },
        grid: {
          bottom: 50,
          left: 70,
          right: 50,
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "#15faff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          max: 100,
          splitNumber: 4,
          interval: 25,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#4b4d64",
            },
          },
          axisLabel: {
            formatter: "{value} %",
            textStyle: {
              //改变刻度字体样式
              color: "#ffffff",
            },
          },
        },
        series: [
          {
            name: "环比",
            type: "line",
            // smooth: true,
            symbol: "none",
            symbolSize: 10,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(255, 204,1, .9)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(6, 8, 41,.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#ffcb00",
              },
            },
            data: data1,
          },
          {
            name: "环比",
            type: "lines",
            coordinateSystem: "cartesian2d",
            zlevel: 1,
            polyline: true,
            // smooth: true,
            symbol: "circle",
            effect: {
              show: true,
              trailLength: 0.4,
              symbol: "circle",
              period: 8, //光点滑动速度
              symbolSize: 8,
            },
            lineStyle: {
              normal: {
                color: "#ffcb00",
                width: 0,
                opacity: 0,
                curveness: 0,
              },
            },
            data: datacoords,
          },
          {
            name: "同比",
            type: "line",
            smooth: false,
            symbol: "none",
            symbolSize: 10,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(21, 250, 255,.9)",
                    },
                    {
                      offset: 0.8,
                      color: "rgba(6, 8, 41,.1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            itemStyle: {
              normal: {
                color: "#15faff",
              },
            },
            data: data2,
          },
          {
            name: "同比",
            type: "lines",
            coordinateSystem: "cartesian2d",
            zlevel: 1,
            polyline: true,
            symbol: "circle",
            effect: {
              show: true,
              trailLength: 0.4,
              symbol: "circle",
              period: 8, //光点滑动速度
              symbolSize: 8,
            },
            lineStyle: {
              normal: {
                color: "#15faff",
                width: 0,
                opacity: 0,
                curveness: 0,
              },
            },
            data: datacoords2,
          },
        ],
      };
      this.charts.setOption(option);
    },
    // 三条折线重叠，组成一小段流动效果
    initData6() {
      var option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#49bfde",
            },
          },
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#fff",
              // shadowOffsetX: 0, // 折线的X偏移
              // shadowOffsetY: 3, // 折线的Y偏移
              shadowBlur: 2, // 折线模糊
              // shadowColor: "rgba(0,204,169,0.95)", //折线颜色
            },
            animationDelay: 50,
            animationDuration: 15000,
          },
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
            lineStyle: {
              color: "#49bfde",
            },
            animationDelay: 500,
            animationDuration: 5000,
          },
        ],
      };
      this.charts.setOption(option);
    },
    initData7() {
      let yData = [222, 932, 66, 934, 111, 333, 0],
        xData = ["测1", "测2", "测3", "测4", "测5", "测6", "测7"],
        datacoords = [
          {
            coords: [],
          },
        ];
      for (var i = 0; i < xData.length; i++) {
        datacoords[0].coords.push([xData[i], yData[i]]);
      }
      this.charts.setOption({
        animation: true, //控制动画示否开启
        animationDuration: 3000,
        animationEasing: "bounceOut", //缓动动画
        animationThreshold: 8, //动画元素的阈值
        backgroundColor: "transparent", // 给echarts图设置背景色
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.5)",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "rgba(0,0,0,.5)",
            },
          },
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        grid: {
          left: "3%", //图表距边框的距离
          right: "3%",
          top: "15%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            nameGap: 3,
            nameTextStyle: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12,
            },
            type: "category",
            data: xData,
            boundaryGap: false, //从0开始
            axisLine: {
              onZero: true,
              rotate: 30, //坐标轴内容过长旋转
              interval: 1,
              lineStyle: {
                color: "#636E7C",
              },
            },
            axisLabel: {
              color: "rgba(255,255,255,.8)", //坐标的字体颜色
              fontSize: 12,
            },
            axisTick: {
              //坐标轴刻度颜色  x和y不交叉
              show: false,
            },
          },
        ],
        yAxis: [
          {
            name: "个",
            min: 0,
            max: function (value) {
              return Math.ceil(value.max / 5) * 5;
            },
            splitNumber: 5,
            type: "value",
            nameTextStyle: {
              color: "rgba(255,255,255,.89)",
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.25)",
                type: "dashed",
              },
            },
            axisTick: {
              //坐标轴刻度颜色
              show: false,
            },
            axisLine: {
              //坐标轴线颜色
              show: true,
              lineStyle: {
                color: "#636E7C",
              },
            },
            axisLabel: {
              color: "rgba(255,255,255,.8)", //坐标的字体颜色
              fontSize: 12,
            },
          },
        ],
        series: [
          {
            name: "苏苏小苏苏",
            type: "line",
            smooth: false,
            lineStyle: {
              color: "#DC7828",
              width: 1.5,
              type: "dashed",
              shadowOffsetX: 0, // 折线的X偏移
              shadowOffsetY: 10, // 折线的Y偏移
              shadowBlur: 4, // 折线模糊
              shadowColor: "rgba(255, 255, 255, 0.8)", //设置折线阴影颜色
            },
            showSymbol: true, //是否默认展示圆点
            symbol: "circle", // 默认是空心圆（中间是白色的）
            symbolSize: 7,
            itemStyle: {
              color: "#021E47", //实圆的背景色
              borderWidth: 1,
              borderColor: "#DC7828",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: "rgba(220,120,40,0.8)",
                },
                {
                  offset: 0.74,
                  color: "rgba(220,120,40,0.5)",
                },
                {
                  offset: 0,
                  color: "rgba(220,120,40,0)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: yData,
          },
          {
            showSymbol: false,
            name: "苏苏小苏苏",
            type: "lines",
            polyline: true,
            smooth: false,
            coordinateSystem: "cartesian2d",
            zlevel: 1,
            effect: {
              show: true,
              smooth: true,
              period: 6,
              symbolSize: 4,
            },
            lineStyle: {
              color: "#fff",
              width: 1,
              opacity: 0,
              curveness: 0,
              cap: "round",
            },
            data: datacoords,
          },
        ],
      });
    },
    initData8() {
      let yData = [90, 555, 666, 999, 567, 999, 888, 0],
        xData = ["测1", "测2", "测3", "测4", "测5", "测6", "测7", "测8"],
        datacoords = [];
      for (var i = 0; i < xData.length; i++) {
        datacoords.push([
          {
            coord: [i, yData[i]],
          },
          {
            coord: [i + 1, yData[i + 1]],
          },
        ]);
      }
      this.charts2.setOption({
        animation: true, //控制动画示否开启
        animationDuration: 3000,
        animationEasing: "bounceOut", //缓动动画
        animationThreshold: 8, //动画元素的阈值
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.5)",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "rgba(0,0,0,.5)",
            },
          },
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        grid: {
          left: "3%", //图表距边框的距离
          right: "3%",
          top: "15%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            nameGap: 3,
            nameTextStyle: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12,
            },
            type: "category",
            data: xData,
            boundaryGap: false, //从0开始
            axisLine: {
              onZero: true,
              rotate: 30, //坐标轴内容过长旋转
              interval: 1,
              lineStyle: {
                color: "#636E7C",
              },
            },
            axisLabel: {
              color: "rgba(255,255,255,.8)", //坐标的字体颜色
              fontSize: 12,
            },
            axisTick: {
              //坐标轴刻度颜色  x和y不交叉
              show: false,
            },
          },
        ],
        yAxis: [
          {
            name: "个",
            min: 0,
            max: function (value) {
              return Math.ceil(value.max / 5) * 5;
            },
            splitNumber: 5,
            type: "value",
            nameTextStyle: {
              color: "rgba(255,255,255,.89)",
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.25)",
                type: "dashed",
              },
            },
            axisTick: {
              //坐标轴刻度颜色
              show: false,
            },
            axisLine: {
              //坐标轴线颜色
              show: true,
              lineStyle: {
                color: "#636E7C",
              },
            },
            axisLabel: {
              color: "rgba(255,255,255,.8)", //坐标的字体颜色
              fontSize: 12,
            },
          },
        ],
        series: [
          {
            name: "苏苏小苏苏",
            type: "line",
            smooth: false,
            lineStyle: {
              color: "aqua",
              width: 1.5,
              type: "solid",
              shadowOffsetX: 0, // 折线的X偏移
              shadowOffsetY: 0, // 折线的Y偏移
              shadowBlur: 4, // 折线模糊
              shadowColor: "rgba(255, 255, 255, 0.8)", //设置折线阴影颜色
            },
            showSymbol: true, //是否默认展示圆点
            symbol: "circle", // 默认是空心圆（中间是白色的）
            symbolSize: 7,
            itemStyle: {
              color: "#021E47", //实圆的背景色
              borderWidth: 1,
              borderColor: "aqua",
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 1,
                  color: "rgba(0, 255, 255, .7)",
                },
                {
                  offset: 0.74,
                  color: "rgba(0, 170, 255, 0.3)",
                },
                {
                  offset: 0,
                  color: "rgba(220,120,40,0)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: yData,
          },
          {
            showSymbol: false,
            name: "苏苏小苏苏",
            type: "lines",
            polyline: false,
            smooth: false,
            coordinateSystem: "cartesian2d",
            zlevel: 1,
            effect: {
              show: true,
              smooth: true,
              period: 2,
              symbolSize: 4,
            },
            lineStyle: {
              color: "#fff",
              width: 10,
              opacity: 0,
              curveness: 0,
              cap: "round",
            },
            data: datacoords,
          },
        ],
      });
    },
  },
};
</script>
<style scoped lang="less">
.contentBox {
  background: linear-gradient(90deg, #03224e 0%, #011030 100%);
}
.chart {
  width: 600px;
  height: 400px;
}
</style>
